import { useEffect, useMemo, useRef, useState } from "react";
import { Button, notification } from 'antd'
// import microApp from '@micro-zoe/micro-app'

import { useRouter, useSearchParams } from "@/router/hooks";
import styled from "styled-components";
import CodeEditor from "@/components/codemirror/CodeEditor";

const { sendMessageToApp, listenData } = window.MFE
console.log(window.MFE, 'window.MFE === ');


const MicroHome = () => {
  const searchParams = useSearchParams()



  const initMicro = () => {
    window.MFE.app.addDataListener((res) => {
      const { data } = res
      console.log('应用2接收到数据', data)
    
      notification.success({
        message: `${data.to}: 接收到来自${data.from}的数据：${JSON.stringify(data)}`,
        duration: 5
      })
    })
    // function dataListener (data) {
    //   console.log('来自主应用的数据', data)
    // }
    
    // listenData(dataListener)
  }

  const sendMessage = () => {
    // to、from传子应用的标识，其他自行添加
    sendMessageToApp({ to: 'micro-app2', from: 'micro-app1', type:'message', data: '这是应用1发送来的消息' })
  }
  const code = `
  window.MFE.app.addDataListener((res) => {
    const { data } = res
    console.log('接收到数据', data)
  })`

  useEffect(() => {
    initMicro()
    return () => {
      // microApp.removeDataListener('micro-large-screen')
    }
  }, [])

  return <StyleWrap>
    <p>应用2</p>
    <div>示例代码</div>
    <CodeEditor value={code} height={'100px'} lang="json" readOnly />
  </StyleWrap>;
}

const StyleWrap = styled.div`
  p {
    font-size: 20px;
    color: #fff;
    width: 100%;
    text-align: center;
  }
`

export default MicroHome;